import React, {createRef} from "react"
import ContentView from "../../components/ContentView"
import CanvasDraw from "react-canvas-draw";
import './index.scss'
export default class Signature extends React.Component{
        constructor (props) {
                super (props);
                this.canvasRef = createRef()
        }
        handleClear=()=>{
                this.canvasRef.current.clear()
        }
        handleCreate = ()=>{
                this.canvasRef.current.getSaveData()
                // console.log(this.canvasRef.current.getSaveData())
                let pic = this.canvasRef.current.canvas.drawing.toDataURL('image/png')
                const base64ToBlob = base64Data=> {
                        let arr = base64Data.split(','),
                                fileType = arr[0].match(/:(.*?);/)[1],
                                bstr = atob(arr[1]),
                                l = bstr.length,
                                u8Arr = new Uint8Array(l);

                        while (l--) {
                                u8Arr[l] = bstr.charCodeAt(l);
                        }
                        return new Blob([u8Arr], {
                                type: fileType
                        });
                };
                const blobToFile = function(newBlob, fileName) {
                        newBlob.lastModifiedDate = new Date();
                        newBlob.name = fileName;
                        return newBlob;
                };
                const blob = base64ToBlob(pic);
                const file = blobToFile(blob, '123');
                console.log(file)
        }
        render () {
                return <ContentView title='签定合同'>
                        <div className="signature-content">
                                <div className="click-handle">
                                        <div className="btn" onClick={this.handleClear}>清除</div>
                                        <div className="btn confirm" onClick={this.handleCreate}>确定</div>
                                </div>
                                <div className="draw-handle">
                                        <CanvasDraw
                                                ref={this.canvasRef}
                                                brushColor="#000"
                                                brushRadius={3}
                                                lazyRadius={0}
                                                canvasWidth={"100%"}
                                                canvasHeight={'100%'}/>
                                </div>
                        </div>
                </ContentView>
        }

}
